<template>
  <div class="menu-container" @scroll="watchScroll">
    <div class="main" ref="menuMain" @scroll="watchScroll">
      <MenuNav />
      <MenuListItem />
    </div>
    <div class="footer">
      <MenuFooterBanner />
    </div>
  </div>
</template>

<script>
import MenuNav from '../components/MenuNav.vue'
import MenuListItem from '../components/MenuListItem.vue'
import MenuFooterBanner from '../components/MenuFooterBanner.vue'
export default {
    name: 'MenuDetail',
    components: {
      MenuNav,
      MenuListItem,
      MenuFooterBanner
    },
    methods: {
      watchScroll(e) {
        console.log(e, '######');
      }
    }
}
</script>

<style scoped>
.main {
  display: flex;
  position: relative;
  /* overflow: scroll; */
}
.footer {
  width: 100%;
}

</style>